<template>
  <div>
    <div>
      <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/class' }"
        >教室管理
        </el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <!-- 讲师列表 -->

      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="teacherQuery.classroomNumber" placeholder="教室编号" suffix-icon="el-icon-search"/>
        </el-form-item>

        <el-form-item>
          <el-input v-model="teacherQuery.classroomName" placeholder="教室名称" suffix-icon="el-icon-search"/>
        </el-form-item>

        <el-form-item label="教室人数">
          <el-input-number :min="0" :max="500" label="最少0人" @blur="renshu"
                           v-model="teacherQuery.galleryfulmin"
                           type="input"
          />
        </el-form-item>

        <el-form-item>
          <el-input-number :min="0" :max="500" label="最多500人" @blur="renshu"
                           v-model="teacherQuery.galleryfulmax"
                           type="input"
          />
        </el-form-item>
        <br/>
        <el-form-item label="">
          <el-select
            v-model="teacherQuery.area"
            placeholder="区域"
            @change="shengOneChanged"
          >
            <el-option
              v-for="subject in one"
              :key="subject.area"
              :label="subject.area+'区'"
              :value="subject.area"
            />
          </el-select>

          <!-- 二级分类 -->
          <el-select
            v-model="teacherQuery.buildingNo"
            placeholder="楼号"
            @change="shiTwoChanged"
          >
            <el-option
              v-for="subject in two"
              :key="subject.buildingNo"
              :label="'第'+subject.buildingNo+'号楼'"
              :value="subject.buildingNo"
            />
          </el-select>
          <!-- 三级分类 -->
          <el-select
            v-model="teacherQuery.buildingFloor"
            placeholder="楼层"
            @change="xianThreeChanged"
          >
            <el-option
              v-for="subject in three"
              :key="subject.buildingFloor"
              :label="'第'+subject.buildingFloor+'楼层'"
              :value="subject.buildingFloor"
            />
          </el-select>
        </el-form-item>

        <el-button icon="el-icon-search" type="primary" @click="getList()"
        >查询
        </el-button
        >
        <el-button type="warning" @click="resetData()" icon="el-icon-delete">清空</el-button>
        <div>
          <el-button type="primary" @click="handleAdd"> 新增 <i class="el-icon-circle-plus-outline"></i></el-button>

          <!-- <el-button @click="toggleSelection()">批量删除</el-button> -->
          <el-button slot="reference" type="danger" @click="toggleSelection()"
          >批量删除 <i class="el-icon-remove-outline"></i
          ></el-button>
          <!--          <el-button class="ml-5" type="success">导入 <i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->


          <el-button type="info" @click="daochu">导出 <i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </el-form>

      <el-form label-width="120px">
        <el-form-item label="信息描述">
          <el-tag type="info">excel模版说明</el-tag>
          <el-tag>
            <i class="el-icon-download"/>
            <a :href="'/static/stu.xlsx'">点击下载模版</a>
          </el-tag>

        </el-form-item>


        <el-form-item label="选择Excel" label-width="120px">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :disabled="importBtnDisabled"
            :limit="1"
            :action="'http://localhost:8080/phoenix-springboot/studentVue/addSubject'"
            name="file"
            accept="application/vnd.ms-excel">
            <el-button slot="trigger" type="info"> 点击上传 <i class="el-icon-upload el-icon--right"/></el-button>
            <el-button
              :loading="loading"
              style="margin-left: 10px;"
              type="success"
              @click="submitUpload">{{ fileUploadBtnText }}
            </el-button>
          </el-upload>
        </el-form-item>

      </el-form>


      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        element-loading-text="数据加载中"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45"></el-table-column>

        <el-table-column align="center" label="序号" width="60">
          <template slot-scope="scope">
            {{
              (teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="区域" width="80">
          <template slot-scope="scope">

            <span v-if="scope.row.area === 'A'">A区</span>
            <span v-if="scope.row.area === 'B'">B区</span>
            <span v-if="scope.row.area === 'C'">C区</span>
            <span v-if="scope.row.area === 'D'">D区</span>
            <span v-if="scope.row.area === 'E'">E区</span>
            <!--            {{ scope.row.area }}-->
          </template>
        </el-table-column>
        <!-- 头像 开始
      <el-table-column label="讲师头像" width="100px" align="center">
        <template slot-scope="scope">
          <div class="info" >
            <div class="pic" >
              <img :src="scope.row.avatar" alt="scope.row.title" width="80px"/>
            </div>
          </div>
        </template>
      </el-table-column> -->
        <!-- 头像 结束 -->
        <el-table-column label="楼号" align="center" prop="buildingNo" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingNo === '1'">第一号楼</span>
            <span v-if="scope.row.buildingNo === '2'">第二号楼</span>
            <span v-if="scope.row.buildingNo === '3'">第三号楼</span>
          </template>
        </el-table-column>

        <el-table-column label="楼层" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingFloor === '1'">第一层</span>
            <span v-if="scope.row.buildingFloor === '2'">第二层</span>
            <span v-if="scope.row.buildingFloor === '3'">第三层</span>
          </template>
        </el-table-column>

        <el-table-column label="教室编号" prop="classroomNumber" align="center" width="100"/>
        <el-table-column label="教室名称" prop="classroomName" align="center" width="140"/>
        <el-table-column label="容纳人数" prop="galleryful" align="center" width="100"/>
        <el-table-column label="使用状态" prop="useStatus" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.useStatus === '0'">使用</span>
            <span v-if="scope.row.useStatus === '1'">未使用</span>
            <span v-if="scope.row.useStatus === '2'">维系中</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="160"/>
        <el-table-column label="修改时间" prop="updateTime" width="160"/>

        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="handleEdit(scope.row)">
              修改 <i class="el-icon-edit"></i>
            </el-button>

            <!--            <router-link :to="'/student/edit/' + scope.row.stuId">-->
            <!--              <el-button icon="el-icon-edit" size="mini" type="primary"-->
            <!--              >修改-->
            <!--              </el-button>-->
            <!--            </router-link>-->
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="removeDataById(scope.row.stuId)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="teacherQuery.page"
        :page-size="teacherQuery.limit"
        :page-sizes="[3, 5, 8, 10]"
        :total="total"
        background
        layout="total, sizes ,prev, pager, next, jumper"
        style="padding: 30px 0; text-align: center"
        @current-change="getList"
        @size-change="handleSizeChange"
      />

      <!--    编辑弹窗    -->
      <el-dialog :visible.sync="dialogFormVisible" title="" width="40%">
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <el-form label-width="80px" :label-position="labelPosition">
          <!-- <el-form-item label="学号">
            <el-input v-model="form.studentNum" autocomplete="off"></el-input>
          </el-form-item> -->

          <el-form-item label="教室编号">
            <el-input v-model="teacher.classroomNumber" placeholder="教室编号" suffix-icon="el-icon-search"/>
          </el-form-item>

          <el-form-item label="教室名称">
            <el-input v-model="teacher.classroomName" placeholder="教室名称" suffix-icon="el-icon-search"/>
          </el-form-item>


          <el-form-item label="容纳人数">
<!--            <el-input v-model="teacher.galleryful" autocomplete="off"></el-input>-->
            <el-input-number :min="0" :max="500" label="最多500人" v-model="teacher.galleryful" type="input"
            />
          </el-form-item>

          <!-- 区域 楼号  楼层-->
          <el-form-item label="区域">
            <el-select
              v-model="teacher.area"
              placeholder="区域"
              @change="shengOneChangedTk"
            >
              <el-option
                v-for="subject in one"
                :key="subject.area"
                :label="subject.area+'区'"
                :value="subject.area"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="楼号">
            <!-- 二级分类 -->
            <el-select
              v-model="teacher.buildingNo"
              placeholder="楼号"
              @change="shiTwoChangedTk"
            >
              <el-option
                v-for="subject in two"
                :key="subject.buildingNo"
                :label="'第'+subject.buildingNo+'号楼'"
                :value="subject.buildingNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="楼层">
            <!-- 三级分类 -->
            <el-select
              v-model="teacher.buildingFloor"
              placeholder="楼层"
              @change="xianThreeChanged"
            >
              <el-option
                v-for="subject in three"
                :key="subject.buildingFloor"
                :label="'第'+subject.buildingFloor+'楼层'"
                :value="subject.buildingFloor"
              />
            </el-select>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate">确定</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  //写核心的代码
  // data:{

  // },
  data() {
    //定义变量和初始值
    return {
      list: null, //查询之后接口返回集合
      // page: 1, //当前页
      // limit: 6, //每页记录数
      total: 0, //总记录数vu
      teacherQuery: {
        page: 1, //当前页
        limit: 5, //每页记录数
        buildingFloor: '',
        buildingNo: '',
        galleryfulmax: '',
        galleryfulmin: '',
        area: '',
        classroomNumber: '',

      }, //条件封装的对象
      one: [], // 一级分类列表
      two: [], // 二级分类列表,
      three: [], //三级分类列表
      multipleSelection: [],//批量删除的ids 需要转成数组
      dialogFormVisible: false,
      teacher: {
        pkId:"",
        avatar: "",
        buildingFloor: "",
        buildingNo: "",
        area: "",
        classroomName:'',
        galleryful:'',
      },
      saveBtnDisabled: false,
      // BASE_API: process.env.BASE_API, // 接口API地址    BASE_API: '"http://localhost:9001"',
      fileUploadBtnText: '上传到服务器', // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,//上传的loading
      listLoading: true, // 是否显示loading信息
      labelPosition: 'right',//弹窗默认
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getList();
    this.getOneSubject(); //初始化省
  },
  methods: {
    //创建具体的方法，调用teacher.js定义的方法
    //讲师列表的方法
    handleSizeChange(limit) {
      console.log(limit);

      this.teacherQuery.limit = limit;
      this.getList();
    },
    getList(page = 1) {
      this.teacherQuery.page = page;
      // this.$axios({
      //   method: 'post',
      //   url:"http://localhost:8080///phoenix-springboot/studentVue/StudentfindAllormodil",
      //   data:  this.teacherQuery
      // })
      this.$axios
        .post("http://localhost:8080//phoenix-springboot/classVue/classfindAllormodil",
          this.teacherQuery
        )
        .then((response) => {
          //response 接口返回数据
          // console.log(response)
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false  //记得：否显示loading信息
          // console.log(response.data.rows);
          // console.log(response.data.total);
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
    // 条件清空
    resetData() {
      this.teacherQuery = {
        page: 1, //当前页
        limit: 6, //每页记录数
      };
      this.getList();
    },
    //删除
    removeDataById(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.get("http://localhost:8080//phoenix-springboot/studentVue/deleteById/" + id);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },

    renshu() {
      if (this.teacherQuery.galleryfulmin > this.teacherQuery.galleryfulmax) {
        this.$message({
          type: "warning",
          message: "最少人数不可以多于最多人数，请您重新输入!",
        });
      }

    },

    //初始化省市县
    getOneSubject() {
      this.$axios.get("http://localhost:8080//phoenix-springboot/classVue/threexlk").then((response) => {
        this.one = response.data.data.items;
      });
    },

    //初始化二级分类(当点击一级分类会触发change事件)
    shengOneChanged(value) {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbn", this.teacherQuery).then((response) => {
        this.two = response.data.data.items
        //当第二次点击一级分类后把二级分类的id值清空达到自动清空二级分类
        console.log("22")
        this.teacherQuery.buildingNo = "";
        this.teacherQuery.buildingFloor = "";
        this.$forceUpdate(); //强制更新
      });
    },
    //初始化三级分类(当点击二级分类会触发change事件)
    shiTwoChanged(value) {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbf", this.teacherQuery).then((response) => {
        this.three = response.data.data.items
        console.log("333")

        //当第二次点击二级分类后把三级分类的id值清空达到自动清空二级分类
        this.teacherQuery.buildingFloor = "";
        this.$forceUpdate(); //强制更新

      });
    },

    //初始化二级分类(当点击一级分类会触发change事件) 弹框的
    shengOneChangedTk(value) {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbn", this.teacher).then((response) => {
        this.two = response.data.data.items
        //当第二次点击一级分类后把二级分类的id值清空达到自动清空二级分类
        console.log("22")
        this.teacher.buildingNo = "";
        this.teacher.buildingFloor = "";
        this.$forceUpdate(); //强制更新
      });
    },
    //初始化三级分类(当点击二级分类会触发change事件) 弹框的
    shiTwoChangedTk(value) {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbf", this.teacher).then((response) => {
        this.three = response.data.data.items
        console.log("333")
        //当第二次点击二级分类后把三级分类的id值清空达到自动清空二级分类
        this.teacher.buildingFloor = "";
        this.$forceUpdate(); //强制更新
      });
    },
    //下拉框强制更新
    xianThreeChanged(value) {
      this.$forceUpdate(); //强制更新
    },
    //批量删除的ids集合
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    //批量删除 multipleSelection -> 转化成数组
    toggleSelection() {
      let ids = this.multipleSelection.map((v) => v.stuId);
      // console.log(ids);

      this.$confirm("此操作将永久删除" + ids.length + "条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.$axios.delete("http://localhost:8080//phoenix-springboot/studentVue/batchDeletelist/" + ids);
        })
        .then(() => {
          this.getList(); //回到列表页面
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },

    //初始化所有省市县
    initott() {
      this.$axios.get("http://localhost:8080//phoenix-springboot/classVue/threexlk").then((response) => {
        this.one = response.data.data.items;
      });
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbn", this.teacherQuery).then((response) => {
        this.two = response.data.data.items;
      });
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/threexlkbf", this.teacherQuery).then((response) => {
        this.three = response.data.data.items;
      });
    },
    //点击编辑按钮
    handleEdit(row) {
      // console.log(row)//拿到当前行的所有数据
      console.log(row.pkId)//拿到当前行的id
      //根据id查询的方法
      this.getInfo(row.pkId);
      this.initott();
      // this.teacher = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },

    //打开添加按钮
    handleAdd() {
      this.dialogFormVisible = true
      this.teacher = {}
      this.getOneSubject(); //初始化省
    },

    // 根据学生Id查询的方法
    getInfo(id) {
      this.$axios.get("http://localhost:8080//phoenix-springboot/classVue/getstu/" + id).then((response) => {
        this.teacher = response.data.data.teacher;
      });
    },
    //保存按钮
    saveOrUpdate() {
      this.saveBtnDisabled = true; //保存按钮是否禁用（避免重复提交）

      // 判断是添加/修改学生的方法
      if (!this.teacher.pkId) {
        //添加
        console.log("1");
        console.log(this.teacher);
        this.saveTeacheradd();
      } else {
        //修改
        this.updateTeacher();
        console.log("2");
      }
    },

    //修改讲师的方法
    updateTeacher() {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/updClass", this.teacher)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .then((resposne) => {
          //先关闭弹窗
         this. dialogFormVisible = false
          this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
          this.getList();
          this.getOneSubject(); //初始化省
          this.two = [], //清空市
          this.three = []//清空县
          // 调用
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "修改失败",
          });
        });
    },

    // 添加讲师的方法
    saveTeacheradd() {
      this.$axios.post("http://localhost:8080//phoenix-springboot/classVue/addClass", this.teacher)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .then((resposne) => {
          //先关闭弹窗
          this.dialogFormVisible = false
          this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
          this.getList();
          this.getOneSubject(); //初始化省
          this.two = [], //清空市
            this.three = []//清空县
          // 回到列表页面,路由跳转
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "添加失败",
          });
        });
    },

    //上传
    submitUpload() { //点击按钮上传文件到接口里面
      this.fileUploadBtnText = '正在上传'
      this.importBtnDisabled = true
      this.loading = true
      //  js:document.getElementById("upload").submit()   upload - id唯一标识
      this.$refs.upload.submit()
    },
    fileUploadSuccess() {//上传成功
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入成功！"
        // message:response.message
      })
      //通过路由跳转到课程分类列表
      // this.$router.push({path:'/subject/list'})

    },
    fileUploadError() {//上传失败
      // 提示信息
      this.loading = false
      this.$message({
        type: "success",
        message: "导入失败"
        // message:response.message
      })
    },

    //下载
    daochu() {
      this.$axios.get("http://localhost:8080//phoenix-springboot/studentVue/read")
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "导出成功!",
          });
        })
        .catch(() => {
          return this.$message({
            message: '导出失败！',
            type: 'warning'
          });
        })
    }

  },
};
</script>

<style>
</style>
